<template>
  <swiper :options="swiperOption" v-if="list.length>0">
    <swiper-slide v-for="(page,index) in pages" :key="index">
      <div class="situation border-bottom">
        <div class="jd" v-for="item of page" :key="item.id">
          <a href="http://touch.piao.qunar.com/touch/index_%E5%8C%97%E4%BA%AC.html">
            <div class="jd_img">
              <img :src="item.http" />
            </div>
            <div class="jd_p">
              {{ item.txt }}
            </div>
          </a>
        </div>
      </div>
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>

<script>
// var icont = [
//   { id: '01', http: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png', txt: '景点门票' },
//   { id: '02', http: 'http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png', txt: '故宫' },
//   { id: '03', http: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png', txt: '北京必游' },
//   { id: '04', http: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/a40ee278d67000f2a29d2e20f6a029b3.png', txt: '香山公园' },
//   { id: '05', http: 'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png', txt: '一日游' },
//   { id: '06', http: 'http://img1.qunarzz.com/piao/fusion/1803/67/9a1678221b8e0e02.png', txt: '古北水镇' },
//   { id: '07', http: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png', txt: '欢乐谷万圣节' },
//   { id: '08', http: 'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png', txt: '赏红叶' },
//   { id: '09', http: 'http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png', txt: '泡温泉' },
//   { id: '10', http: 'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png', txt: '天坛公园' }
// ]
export default {
  name: 'RollGo',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: false
      }
    }
  },
  computed: { // 计算属性
    pages () { // 数组重组大法
      let arr = [] // 保存重组后的数组
      this.list.forEach(function (obj, index) {
        let page = Math.floor(index / 8) // index/8<1表示数据在第一页
        if (!arr[page]) {
          arr[page] = []
        }
        arr[page].push(obj)
      })
      return arr
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .situation
    overflow: hidden;
    height: 3.7rem;
    min-height 3.7rem;
    padding-top: .1rem;
    background-color: #fff;
    .jd
      float: left;
      width: 25%;
      height: 1.5rem;
      padding-top: .1rem;
      text-align: center;
      >a
        color black
      .jd_img
       >img
        width 1.1rem
        height 1.1rem
</style>
